.component {
  & > .label {
    color: var(--theme-support-settings-text-color);
    font-family: var(--font-semibold);
    font-size: 16px;
    line-height: 1.38;
    margin-bottom: 11px;
  }
}

.themesRowWrapper {
  display: flex;
  margin-bottom: 20px;

  .themeImageWrapper {
    width: calc(33.33% - 80px / 3);
    &.active {
      img,
      span {
        opacity: 1;
        transition: opacity 400ms ease;
      }
    }

    &.inactive {
      &:hover {
        img {
          cursor: pointer;
          opacity: 0.6;
        }

        span {
          opacity: 0.8;
        }
      }
    }

    & > img {
      border: 1px solid var(--theme-settings-theme-select-border-color);
      display: block;
      opacity: 0.3;
      width: 100%;
    }

    & > span {
      color: var(--theme-settings-theme-select-title-color);
      display: inline-block;
      font-family: var(--font-regular);
      font-size: 16px;
      line-height: 1.38;
      margin-top: 11px;
      opacity: 0.5;
      text-align: center;
    }

    & + .themeImageWrapper {
      margin-left: 40px;
    }
  }
}
